import React from 'react'

function sayHai(sayHai) {
    return 'HI~'+ sayHai
}
const dv = <div>JSX本身也是一个合法的表达式，对象就是不合法的，他是个例外一般只出现在style里面</div>
const loading = false
const loadData=()=>{
    if (loading) {
       return <div>正在加载中....</div>
    } else {
        return <div>没有更多数据了</div>
    }
}
const IF =<div>jsx的条件渲染:if...else<br/>{loadData()}</div>
const loading1 = false
const loadData1 = () => { return loading1?<div>三元正在加载中....</div> : <div>三元没有更多数据了</div> }
const loading2 = false
const loadData2 = () => { return loading2 && <div>逻辑与正在加载中....</div>}

// 组件
function Hello() {
    return <div>我是一个组件，为了与react元素区分我首字母要大写，也是直接拿我名字用,如果你没东西return就return null，不写return会报错哦</div>
}
const Saihi = () => null
// 遍历
const list = [
    {id: '1', name:'如果要渲染一组数组，应该使用数组的map()方法'},
    {id: '2', name: '注意渲染列表应该添加key的属性，key的属性值要保证唯一'},
    {id:'3', name:'原则map遍历谁就给谁添加key属性，尽量避免使用索引号作为key'}
]
const ulLI = <ul>{list.map(item => <li key={item.id}>{item.name}</li>)}</ul>
// 用类写的组件
class Exd extends React.Component {
    render (){
        return <div>约定1用ES6的class开头，约定2类组件名字首字母大写，约定3.类组件应该继承React.Component父类，从而可以使用父类中提供的方法或属性
            <p>约定4.类组件必须提供render()，约定4render方法必须有返回值，表示该组件的结构,没有返回值写null
            </p>
        </div>
    }
}

// 创建react元素,但是不友好后面用JSX
// const title = React.createElement('h1', null, 'Hello React!!!')
// JSX
// 1.React属性名使用驼峰命名法
// 2.特殊属性名： class->className, label标签的for->htmlFor , tabindex->tabIndex
// 3.没有子节点的React元素可以用/>结束(只有react的可以)
// 4.推荐使用小括号包裹JSX从而避免js中的自动插入分号的陷阱
function SomeApp(params) {
    return <div>
          <div style={{color: 'red', backgroundColor:'blue'}}>{'JSX注意点,只要是合法的js表达式都可以这样用，数值啊，字符啊，三元啊，函数表达式啊'}</div>
    <div>{12}</div>
    <div>{'abc123'}</div>
    <div>{3>5?'大于5':'不大于5'}</div>
    <div>{sayHai('jose')}</div>
    {dv}
    {/* <h2>{{a:'一般情况下对象是不合法的，他是个例外只出现在style里面'}}</h2> */}
    <div className='pink'>{'花括号中是不能出现if/for语句会报错'}</div>
    {/* { if (true) {} } */}
    {/* { for (let i = 0; i < 10; i++) {} } */}
    {IF}
    <div>{loadData()}</div>
    <div>{loadData1()}</div>
    <div>{loadData2()}</div>
    <div>{'jsx的列表渲染'}</div>
    {ulLI}
    <Hello/>
    <Saihi/>
    <Exd></Exd>
    </div>
}
export default SomeApp